<template>
  <el-scrollbar height="75vh">
    <el-form :inline="false" size="small" label-position="top" :model="tableJson">
      <el-form-item label="表格样式">
        <el-form-item label="边框">
          <el-switch v-model="tableJson.border" />
        </el-form-item>
        <el-form-item label="斑马纹">
          <el-switch size="small" v-model="tableJson.stripe" />
        </el-form-item>
        <el-form-item label="序号">
          <el-switch size="small" v-model="tableJson.index" />
        </el-form-item>
        <el-form-item label="标题对齐" style="width: 160px">
          <el-select v-model="tableJson.headerAlign" placeholder="Select" style="width: 150px">
            <el-option
                v-for="(item, index) in aligns"
                :key="index"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="内容对齐" style="width: 160px">
          <el-select v-model="tableJson.align" placeholder="Select" style="width: 150px">
            <el-option
                v-for="(item, index) in aligns"
                :key="index"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="快捷设置按钮">
          <el-switch v-model="tableJson.setGrid" />
        </el-form-item>
        <el-form-item label="树形">
          <el-switch v-model="tableJson.tree.value" />
        </el-form-item>
      </el-form-item>
      <el-form-item label="标签模式">
        <el-form-item label="显示">
          <el-switch v-model="tableJson.tagModel.enable" />
        </el-form-item>
        <el-form-item label="关联网格字段" style="width: 160px">
          <el-select
              v-model="tableJson.tagModel.field"
              filterable
              placeholder="未关联"
              size="small"
              style="width: 150px"
              @change="selectTagField"
          >
            <el-option
                v-for="item in queryJsonCopy"
                :key="item.field"
                :label="item.label"
                :value="item.field"
                :disabled="item.disabled"
            >
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
                {{ item.field }}
              </span></el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="多选">
          <el-switch v-model="tableJson.tagModel.multiple" />
        </el-form-item>
        <el-form-item label="标题" style="width: 160px">
          <el-input
              v-model="tableJson.tagModel.fieldName"
              style="width: 150px"
              size="small"
              clearable
          />
        </el-form-item>
        <el-form-item label="选项数据源" style="width: 160px">
          <el-select
              v-model="tableJson.tagModel.optionId"
              filterable
              placeholder="Select"
              size="small"
              @change="selectDataSource"
              style="width: 150px"
          >
            <el-option
                v-for="(item, index) in options.options"
                :key="index"
                :label="item.name"
                :value="item.id"
            /> </el-select
          ></el-form-item>
      </el-form-item>
      <el-form-item label="导航树">
        <el-form-item label="显示">
          <el-switch v-model="tableJson.navigationTree.enable" />
        </el-form-item>
        <el-form-item label="关联网格字段" style="width: 160px">
          <el-select
              v-model="tableJson.navigationTree.field"
              filterable
              placeholder="未关联"
              size="small"
              style="width: 150px"
              @change="selectTagField"
          >
            <el-option
                v-for="item in queryJsonCopy"
                :key="item.field"
                :label="item.label"
                :value="item.field"
                :disabled="item.disabled"
            >
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
                {{ item.field }}
              </span></el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="标题" style="width: 160px">
          <el-input
              v-model="tableJson.navigationTree.fieldName"
              style="width: 150px"
              size="small"
              clearable
          />
        </el-form-item>
        <el-form-item label="选项数据源" style="width: 160px">
          <el-select
              v-if="options.options"
              v-model="tableJson.navigationTree.optionId"
              filterable
              placeholder="Select"
              size="small"
              @change="selectDataSource"
              style="width: 150px"
          >
            <el-option
                v-for="(item, index) in options.options.filter((item) => item.tree)"
                :key="index"
                :label="item.name"
                :value="item.id"
            /> </el-select
          ></el-form-item>
      </el-form-item>
      <el-form-item label="操作列">
        <el-form-item label="显示">
          <el-switch v-model="tableJson.operations.isShow" />
        </el-form-item>
        <!-- <el-form-item label="删除">
        <el-switch size="small" v-model="tableJson.operations.del" />
      </el-form-item>
      <el-form-item label="修改">
        <el-switch size="small" v-model="tableJson.operations.edit" />
      </el-form-item>
      <el-form-item label="复制">
        <el-switch size="small" v-model="tableJson.operations.copy" />
      </el-form-item> -->
        <!-- <el-form-item label="移动">
          <el-switch v-model="tableJson.move" />
        </el-form-item> -->
        <el-form-item label="固定宽度" style="width: 140px">
          <el-input-number v-model="tableJson.operations.width" placeholder="固定宽度" />
        </el-form-item>
        <el-form-item label="最小宽度" style="width: 140px">
          <el-input-number v-model="tableJson.operations.minWidth" placeholder="最小宽度" />
        </el-form-item>
        <el-form-item label="列对其方式" style="width: 150px">
          <el-select v-model="tableJson.operations.align" placeholder="Select">
            <el-option
                v-for="(item, index) in aligns"
                :key="index"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-table
            :data="tableJson.operations.base"
            row-key="type"
            border
            stripe
            style="margin-top: 10px"
        >
          <el-table-column label="启用" prop="enable" width="70">
            <template #default="scope">
              <el-switch size="small" v-model="scope.row.enable" />
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="name">
            <template #default="scope">
              <el-input v-model="scope.row.name" size="small" clearable />
            </template>
          </el-table-column>
          <el-table-column label="排序" prop="order">
            <template #default="scope">
              <el-input-number v-model="scope.row.order" placeholder="排序" />
            </template>
          </el-table-column>
          <el-table-column label="描述" prop="description" />
        </el-table>
      </el-form-item>

      <el-form-item label="数据">
        <el-form-item label="显示">
          <el-switch v-model="tableJson.data.isShow" />
        </el-form-item>
        <el-form-item label="添加">
          <el-switch v-model="tableJson.data.add" />
        </el-form-item>
        <el-form-item label="导入">
          <el-switch v-model="tableJson.data.import" />
        </el-form-item>
        <el-form-item label="导出">
          <el-switch v-model="tableJson.data.export" />
        </el-form-item>
        <el-form-item label="批量操作">
          <el-switch v-model="tableJson.data.batch" />
        </el-form-item>
        <el-form-item label="批量删除">
          <el-switch v-model="tableJson.data.batchDel" />
        </el-form-item>
      </el-form-item>
      <el-form-item label="数据隔离">
        <el-form-item label="开启">
          <el-switch v-model="tableJson.dataLsolation.enable" />
        </el-form-item>
        <el-form-item label="用户字段">
          <el-select
              style="width: 150px"
              v-model="tableJson.dataLsolation.field"
              filterable
              allow-create
              default-first-option
              placeholder="未关联"
              size="small"
              placement="top"
          >
            <el-option
                v-for="item in Object.keys(member)"
                :key="item"
                :label="item"
                :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="关联字段">
          <el-select
              style="width: 150px"
              v-if="fieldJsonCopy"
              v-model="tableJson.dataLsolation.joinField"
              filterable
              allow-create
              default-first-option
              placeholder="未关联"
              size="small"
              placement="top"
          >
            <el-option
                v-for="(item, index) in fieldJsonCopy"
                :key="index"
                :label="item.label"
                :value="item.field"
            >
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
                {{ item.field }}
              </span></el-option
            >
          </el-select>
        </el-form-item>
      </el-form-item>
      <el-form-item label="扩展功能" style="width: 100%">
        <el-table :data="tableJson.operations.expand" row-key="id" border stripe>
          <el-table-column type="expand">
            <template #default="scope">
              <el-form
                  :inline="true"
                  size="small"
                  :model="scope"
                  label-position="top"
                  class="demo-form-inline"
              >
                <el-form-item label="主表字段 (数量=附表)" style="width: 150px">
                  <el-select
                      v-if="fieldJsonCopy"
                      v-model="scope.row.joinField.fields"
                      filterable
                      multiple
                      placeholder="未关联"
                      size="small"
                      placement="top"
                  >
                    <el-option
                        v-for="(item, index) in fieldJsonCopy"
                        :key="index"
                        :label="item.label"
                        :value="item.field"
                    >
                      <span style="float: left">{{ item.label }}</span>
                      <span
                          style="float: right; color: var(--el-text-color-secondary); font-size: 13px"
                      >
                        {{ item.field }}
                      </span></el-option
                    >
                  </el-select>
                </el-form-item>
                <el-form-item label="附表关联字段" style="width: 150px">
                  <el-select
                      v-if="gridFieldArr[scope.row.gridId]"
                      v-model="scope.row.joinField.joinFields"
                      filterable
                      multiple
                      placeholder="未关联"
                      size="small"
                      placement="top"
                  >
                    <el-option
                        v-for="(item, index) in gridFieldArr[scope.row.gridId]"
                        :key="index"
                        :label="item.label"
                        :value="item.field"
                    >
                      <span style="float: left">{{ item.label }}</span>
                      <span
                          style="float: right; color: var(--el-text-color-secondary); font-size: 13px"
                      >
                        {{ item.field }}
                      </span></el-option
                    >
                  </el-select>
                </el-form-item>
                <el-tabs v-model="activeName" class="rule_tabs">
                  <el-tab-pane label="必要筛选条件" name="QUERY">
                    <el-form-item label="必要筛选条件" style="width: 60%">
                      <el-select
                          v-if="gridFieldArr[scope.row.gridId]"
                          v-model="scope.row.selectFields"
                          filterable
                          multiple
                          @change="selectField($event, scope.row)"
                          @remove-tag="delField($event, scope.row)"
                          placeholder="未关联"
                          placement="top"
                      >
                        <el-option
                            v-for="(item, index) in gridFieldArr[scope.row.gridId]"
                            :key="index"
                            :label="item.label"
                            :value="item.field"
                        >
                          <span style="float: left">{{ item.label }}</span>
                          <span
                              style="
                              float: right;
                              color: var(--el-text-color-secondary);
                              font-size: 13px;
                            "
                          >
                            {{ item.field }}
                          </span></el-option
                        >
                      </el-select>
                    </el-form-item>
                    <el-form-item
                        label="必要筛选条件设置  （注意：若传递字段与筛选条件重复则会覆盖筛选条件）"
                        style="width: 100%"
                    >
                      <div style="color: brown" v-if="scope.row.queryData === ''">
                        注意:
                        切换Json编辑器时需要有一个初始值,若无,请切换到文本或其他模类型添加初始值再切换会Json编辑器
                      </div>
                      <JsonEditView
                          :key="jsonRefresh"
                          style="width: 100%"
                          v-model="scope.row.queryData"
                      />
                    </el-form-item>
                  </el-tab-pane>
                  <el-tab-pane label="必要添加/编辑条件" name="EDIT">
                    <el-form-item label="必要添加/编辑条件编辑" style="width: 60%">
                      <el-select
                          v-if="gridFieldArr[scope.row.gridId]"
                          v-model="scope.row.editFields"
                          filterable
                          multiple
                          @change="selectEditField($event, scope.row)"
                          @remove-tag="delEditField($event, scope.row)"
                          placeholder="未关联"
                          placement="top"
                      >
                        <el-option
                            v-for="(item, index) in gridFieldArr[scope.row.gridId]"
                            :key="index"
                            :label="item.label"
                            :value="item.field"
                        >
                          <span style="float: left">{{ item.label }}</span>
                          <span
                              style="
                              float: right;
                              color: var(--el-text-color-secondary);
                              font-size: 13px;
                            "
                          >
                            {{ item.field }}
                          </span></el-option
                        >
                      </el-select>
                    </el-form-item>
                    <el-form-item
                        label="必要添加/编辑条件设置 变量模式：${主表字段}"
                        style="width: 100%"
                    >
                      <div style="color: brown" v-if="scope.row.editData === ''">
                        注意:
                        切换Json编辑器时需要有一个初始值,若无,请切换到文本或其他模类型添加初始值再切换会Json编辑器
                      </div>
                      <JsonEditView
                          :key="jsonRefresh"
                          style="width: 100%"
                          v-model="scope.row.editData"
                      />
                    </el-form-item>
                  </el-tab-pane>
                </el-tabs>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="关联网格" width="230" prop="type">
            <template #default="scope">
              <el-select v-model="scope.row.gridId" @change="selectGrid" placeholder="Select">
                <el-option
                    v-for="(item, index) in gridOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="启用" prop="enable" width="70">
            <template #default="scope">
              <el-switch size="small" v-model="scope.row.enable" />
            </template>
          </el-table-column>

          <el-table-column label="排序" prop="order">
            <template #default="scope">
              <el-input-number style="width: 70px" v-model="scope.row.order" placeholder="排序" />
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="field">
            <template #default="scope">
              <el-input v-model="scope.row.name" size="small" clearable />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="170" prop="isSort">
            <template #default="scope">
              <OperationView v-model="tableJson.operations.expand" :scope />
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
  </el-scrollbar>
</template>
<script lang="ts" setup>
import JsonEditView from '@/views/template/util/JsonEditView.vue'
import OperationView from './OperationView.vue'
import { useOptionDataStore } from '@/stores/optionData'
import { storeToRefs } from 'pinia'
const storeOptionData = useOptionDataStore()
const { optionDatas, options } = storeToRefs(storeOptionData)
import { ref, inject, onBeforeMount } from 'vue'
const member = JSON.parse(sessionStorage.getItem('member'))
// 字段配置列表
const props = defineProps(['fieldJson', 'queryJson'])
// 解除与 fieldJson 双向绑定，改为单向
const fieldJsonCopy = ref(JSON.parse(JSON.stringify(props.fieldJson)))
const queryJsonCopy = ref(JSON.parse(JSON.stringify(props.queryJson)))
// 网格设置统一获取
const api = inject('api')
const gridApi = api.getApi('FaSysGrid')
const gridOptions = ref([])
const gridFieldArr = ref({})
const activeName = ref('QUERY')
const jsonRefresh = ref(0)
// {gridId:fields}
const tableJson = defineModel({
  default: {
    border: true,
    stripe: true,
    index: true,
    align: 'center',
    headerAlign: 'center',
    setGrid: true,
    tagModel: {
      enable: false,
      field: '',
      optionId: ''
    },
    navigationTree: {
      fieldName: '',
      enable: false,
      field: '',
      optionId: ''
    },
    data: {
      isShow: true,
      add: true,
      export: true,
      import: true,
      batch: false,
      batchDel: false
    },
    tree: {
      value: true
    },
    move: true,
    operations: {
      isShow: true,
      width: 140,
      minWidth: 140,
      // edit: true,
      // del: true,
      // copy: true,
      align: 'left',
      base: [
        { name: '编辑', type: 'edit', enable: true, order: 1, description: '默认编辑功能' },
        { name: '删除', type: 'del', enable: true, order: 2, description: '默认删除功能' },
        { name: '复制', type: 'copy', enable: true, order: 3, description: '默认复制功能' },
        { name: '移动', type: 'move', enable: true, order: 4, description: '树形表格才能设置' },
        {
          name: '添加子项',
          type: 'addChild',
          enable: true,
          order: 5,
          description: '树形表格才能设置'
        }
      ],
      expand: [
        {
          id: 1,
          enable: true,
          order: 6,
          name: '关联数据',
          gridId: '关联网格id',
          joinField: { fields: [], joinFields: [] },
          selectFields: [],
          queryData: {},
          selectEditFields: [],
          editData: {}
        }
      ]
    },
    dataLsolation: {
      enable: false,
      field: 'id',
      joinField: 'createUser'
    }
  }
})
// 列对其方式
const aligns = [
  {
    value: 'left',
    label: '左对齐'
  },
  {
    value: 'center',
    label: '居中'
  },
  {
    value: 'right',
    label: '右对齐'
  }
]
onBeforeMount(() => {
  // 初始化选项列表
  storeOptionData.refreshOptions()
})
load()
async function load() {
  gridOptions.value = await useOptionDataStore().add('c1c5784bebfc3cff3361d8d00161c79b')
  // 初始化扩展功能网格数据源字段列表
  tableJson.value.operations?.expand?.forEach(async (item) => {
    if (item.enable && item.gridId) {
      await selectGrid(item.gridId)
    }
  })
}

// 选择选项数据源事件
async function selectDataSource(optionId) {
  await storeOptionData.add(optionId)
}

// 选择标签模式关联字段
function selectTagField(filed) {
  queryJsonCopy.value.forEach((item) => {
    if (item.field === filed) {
      tableJson.value.tagModel.fieldName = item.label
      tableJson.value.tagModel.multiple = item.type.select.multiple
      tableJson.value.tagModel.optionId = item.type.select.optionId
    }
  })
}

// 选择关联网格事件
async function selectGrid(gridId) {
  gridFieldArr.value[gridId] = await gridApi.getJsonField(gridId, 'fieldJson')
}

// 添加搜索字段
function selectField(fields, row) {
  for (const key in fields) {
    const field = fields[key]
    if (!row.queryData[field]) {
      row.queryData[field] = null
      jsonRefresh.value++
    }
  }
}
// 删除搜索字段
function delField(field, row) {
  delete row.queryData[field]
  jsonRefresh.value++
}
// 添加编辑字段
function selectEditField(fields, row) {
  for (const key in fields) {
    const field = fields[key]
    if (!row.editData[field]) {
      row.editData[field] = null
      jsonRefresh.value++
    }
  }
}
// 删除搜索字段
function delEditField(field, row) {
  delete row.editData[field]
  jsonRefresh.value++
}
</script>
<style scoped>
.el-form {
  margin: 0px 10px;
}
:deep(.el-table__expanded-cell) {
  background-color: hsl(0, 0%, 95%) !important;
}
:deep(.el-divider__text) {
  background-color: hsl(0, 0%, 95%) !important;
}
.rule_tabs {
  width: 100%;
  /* height: 400px; */
}
</style>
